<template>
    <div class="parent">
        <div class="header">
            <div class="qu">
                <text class="text">区属</text>
            </div>
            <div class="qu">
                <text class="text">区级美丽乡村方案是否实施</text>
            </div>
            <div class="tabCont">
                <div class="topTitle">
                    <text class="text">市级试点村村庄规划、实施方案编制工作</text>
                </div>
                <div class="bottomCont">
                    <div class="one"></div>
                    <div class="two">
                        <div class="left">
                            <text class="text">试点村数</text>
                        </div>
                        <div class="right">
                            <div class="right_one">
                                <div class="bottom_left">
                                    <text class="text">试点村规划完成村数</text>
                                </div>
                                <div class="bottom_right">
                                    <text class="text">通过审批村数</text>
                                </div>
                            </div>
                            <div class="right_one">
                                <div class="bottom_left">
                                    <text class="text">实施方案完成村数</text>
                                </div>
                                <div class="bottom_right">
                                    <text class="text">通过审批村数</text>
                                </div>
                            </div>
                            <div class="right_three">
                                <text class="text">开工建设村数</text>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <scroller scroll-direction>
            <div class="cont">
                <div class="dataItem" v-for="(item, index) in datalist" :key="index">
                    <div class="contItem">
                        <text class="contText">{{item.XZQHMC}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.FAYF}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.CS_SD}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.GHWCCS_SD}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.GHWCCS_SD_SPSG}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.FABZWC_SD}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.FABZWC_SD_SPSG}}</text>
                    </div>
                    <div class="contItem">
                        <text class="contText">{{item.KGJS_SD}}</text>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>
<script>
export default {
    name: 'listCont',
    props: ['datalist'],
    created () {
        this.$notice.loading.show()
    },
    mounted () {
        this.$notice.loading.hide()
    }
}
</script>
<style scoped>
    .parent{
        width: 750px;
        flex: 1;
    }
    .header{
        width: 750px;
        height: 488px;
        background-color: rgba(35,196,160,1);
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .qu{
        width: 93.75px;
        height: 488px;
        padding-left: 28px;
        padding-right: 28px;
        justify-content: center;
        align-items: center;
        border-right-color:#fff;
        border-right-style: solid;
        border-right-width: 2px;
    }
    .text{
        font-size:28px;
        font-family:PingFangSC-Semibold;
        color:rgba(255,255,255,1);
    }
    .tabCont{
        width: 562.5px;
        height: 488px;
    }
    .topTitle{
        width: 562.5px;
        height: 90px;
        border-bottom-color: #fff;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        justify-content: center;
        align-items: center;
    }
    .bottomCont{
        width: 562.5px;
        height: 398px;
    }
    .one{
        width: 562.5px;
        height: 90px;
        
    }
    .two{
        width: 562.5px;
        height: 308px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .left{
        width: 93.75px;
        height: 308px;
        justify-content: center;
        align-items: center;
        padding-right: 28px;
        padding-left: 28px;
    }
    .right{
        width: 468.75px;
        height: 308px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-right: 28px;
        padding-left: 28px;
        border-top-color: #fff;
        border-top-style: solid;
        border-top-width: 2px;
        border-left-color: #fff;
        border-left-style: solid;
        border-left-width: 2px;
    }
    .right_one{
        width: 187.5px;
        height: 308px;
        border-right-color: #fff;
        border-right-style: solid;
        border-right-width: 2px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .bottom_left{
        width: 93.75px;
        height: 308px;
        padding-right: 25px;
        padding-left: 25px;
        justify-content: center;
        align-items: center;
    }
    .bottom_right{
        width: 93.75px;
        height: 218px;
        padding-right: 28px;
        padding-left: 28px;
        justify-content: center;
        align-items: center;
        border-top-color: #fff;
        border-top-style: solid;
        border-top-width: 2px;
        border-left-color: #fff;
        border-left-style: solid;
        border-left-width: 2px;
        margin-top: 90px;
    }
    .right_three{
        width: 93.75px;
        height: 308px;
        justify-content: center;
        align-items: center;
        padding-right: 25px;
        padding-left: 30px;
    }
    .cont{
        width: 750px;
        padding-bottom: 96px;
    }
    .dataItem{
        width: 750px;
        height: 80px;
        border-bottom-color: #dddbdb;
        border-bottom-style: solid;
        border-bottom-width: 2px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #F7FAFF;
    }
    .contItem{
        width: 93.75px;
        height: 80px;
        border-right-color: #dddbdb;
        border-right-style: solid;
        border-right-width: 2px;
        justify-content: center;
        align-items: center;
    }
    .contText{
        font-size: 24px;
        font-family:PingFangSC-Semibold;
        color: #333;
    }
</style>
